<template>
	<view class="container">
		<view class="header">
			<text class="title">沙扒湾攻略</text>
			<view class="search-box">
				<image src="/static/search.png" class="search-icon"></image>
				<input 
					type="text" 
					placeholder="搜索攻略" 
					confirm-type="search" 
					v-model="searchText"
					@input="filterGuides"
					@confirm="filterGuides"
				/>
			</view>
		</view>
		
		<!-- 筛选分类 -->
		<view class="category-filter">
			<view 
				class="filter-item" 
				:class="{'active': currentTab === index}" 
				v-for="(item, index) in tabList" 
				:key="index"
				@tap="switchTab(index)"
			>
				{{item.name}}
			</view>
		</view>
		
		<view class="guides-list">
			<view class="guide-card" v-for="(item, index) in filteredGuideList" :key="item.id" 
				  :class="['card-anim']" 
				  :style="{animationDelay: index * 0.05 + 's'}"
				  @tap="navigateToDetail(item.id)">
				<image class="guide-image" :src="item.coverImage || item.cover" mode="aspectFill"></image>
				<view class="guide-info">
					<text class="guide-name">{{item.title}}</text>
					<view class="guide-tags">
						<text class="tag">{{item.type}}</text>
					</view>
					<view class="guide-meta">
						<view class="author-info">
							<image class="author-avatar-small" :src="item.authorAvatar" mode="aspectFill"></image>
							<text class="author-name-small">{{item.authorName}}</text>
						</view>
						<text class="like-count-small">{{item.likeCount}} 喜欢</text>
					</view>
				</view>
			</view>
			
			<view class="empty-tips" v-if="filteredGuideList.length === 0 && !isFiltering">
				暂无{{tabList[currentTab].name}}数据
			</view>
		</view>
	</view>
</template>

<script>
	// 导入模糊搜索工具
	import searchUtils from '../../utils/search.js';
	
	export default {
		data() {
			return {
				currentTab: 0,
				isFiltering: false,
				searchText: '',
				tabList: [
					{ name: "全部攻略" },
					{ name: "美食" },
					{ name: "购物" },
					{ name: "旅拍地点" },
					{ name: "沙滩" },
					{ name: "出片景点" }
				],
				guideList: [
					{
						id: 1,
						title: '🔥玩沙扒湾(三天行)——很全攻略',
						cover: '/static/图片.jpg',
						coverImage: '/static/图片.jpg',
						authorName: 'sanseafish晓',
						authorAvatar: '/static/logo.png',
						likeCount: 33,
						type: '全部攻略'
					},
					{
						id: 2,
						title: '值得收藏！沙扒湾最好吃美食TOP5——这是完美攻略',
						cover: '/static/图片.jpg',
						coverImage: '/static/图片.jpg',
						authorName: 'sanseafish晓',
						authorAvatar: '/static/logo.png',
						likeCount: 55,
						type: '美食'
					},
					{
						id: 3,
						title: '如果你半夜去沙扒湾的——定会吃到好吃',
						cover: '/static/图片.jpg',
						coverImage: '/static/图片.jpg',
						authorName: '旅游家沙爸的心',
						authorAvatar: '/static/logo.png',
						likeCount: 45,
						type: '美食'
					},
					{
						id: 4,
						title: '可以去这些沙滩玩耍!',
						cover: '/static/图片.jpg',
						coverImage: '/static/图片.jpg',
						authorName: 'sanseafish晓',
						authorAvatar: '/static/logo.png',
						likeCount: 55,
						type: '沙滩'
					},
					{
						id: 5,
						title: '值得收藏！沙扒湾最好吃美食TOP5——这是完美攻略',
						cover: '/static/图片.jpg',
						coverImage: '/static/图片.jpg',
						authorName: 'sanseafish晓',
						authorAvatar: '/static/logo.png',
						likeCount: 55,
						type: '出片景点'
					},
					{
						id: 6,
						title: '沙扒湾点一览',
						cover: '/static/图片.jpg',
						coverImage: '/static/图片.jpg',
						authorName: 'sanseafish晓',
						authorAvatar: '/static/logo.png',
						likeCount: 55,
						type: '旅拍地点'
					}
				],
				filteredOriginalList: [], // 保存原始过滤后的列表
			}
		},
		computed: {
			filteredGuideList() {
				let filteredList = [];
				
				// 先根据标签筛选
				if (this.currentTab === 0) {
					filteredList = this.guideList; // 全部攻略
				} else {
					// 根据选中的标签筛选
					const selectedType = this.tabList[this.currentTab].name;
					filteredList = this.guideList.filter(item => item.type === selectedType);
				}
				
				// 如果有搜索文本，再根据搜索文本筛选
				if (this.searchText.trim()) {
					return searchUtils.fuzzySearch(
						filteredList,
						this.searchText,
						['title', 'type', 'authorName']
					);
				}
				
				return filteredList;
			}
		},
		methods: {
			// 搜索过滤
			filterGuides() {
				// 在这里搜索过滤已经通过计算属性完成
				// 可以在这里添加其他搜索相关逻辑
				console.log('搜索文本:', this.searchText);
			},
			switchTab(index) {
				// 如果点击的是当前激活的选项卡，不做处理
				if (this.currentTab === index) return;
				
				// 更新选中的选项卡
				this.currentTab = index;
			},
			navigateToDetail(id) {
				uni.navigateTo({
					url: `/pages/guide/detail?id=${id}`
				});
			}
		},
		onPullDownRefresh() {
			// 下拉刷新
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShareAppMessage() {
			return {
				title: '沙扒湾旅游攻略',
				path: '/pages/guide/index'
			}
		}
	}
</script>

<style>
	.container {
		padding: 0 30rpx;
	}
	
	.header {
		padding: 30rpx 0;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		padding: 15rpx 25rpx;
	}
	
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	
	.search-box input {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
	}
	
	/* 分类筛选样式 */
	.category-filter {
		display: flex;
		overflow-x: auto;
		background-color: #fff;
		margin: 0 -30rpx 20rpx;
		padding: 20rpx 30rpx;
		white-space: nowrap;
	}
	
	.filter-item {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		transition: all 0.3s ease;
		position: relative;
	}
	
	.filter-item::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 0;
		height: 3rpx;
		background-color: #fff;
		transition: all 0.3s ease;
		transform: translateX(-50%);
	}
	
	.filter-item.active {
		background-color: #ff5a5f;
		color: #fff;
		transform: translateY(-2rpx);
		box-shadow: 0 4rpx 8rpx rgba(255, 90, 95, 0.2);
	}
	
	.filter-item.active::after {
		width: 40%;
	}
	
	/* 攻略列表样式 */
	.guides-list {
		padding-bottom: 30rpx;
		min-height: 300rpx;
	}
	
	/* 卡片动画 */
	.guide-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		will-change: transform, opacity;
	}
	
	.guide-card:active {
		transform: scale(0.98);
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	/* 卡片淡入动画 */
	.card-anim {
		animation: fadeInUp 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
		opacity: 0;
		transform: translateY(20rpx);
	}
	
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	.guide-image {
		width: 100%;
		height: 340rpx;
	}
	
	.guide-info {
		padding: 20rpx;
	}
	
	.guide-name {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
		display: block;
	}
	
	.guide-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 15rpx;
	}
	
	.tag {
		font-size: 24rpx;
		color: #ff5a5f;
		background-color: rgba(255, 90, 95, 0.1);
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		margin-right: 12rpx;
		margin-bottom: 8rpx;
	}
	
	.guide-meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.author-info {
		display: flex;
		align-items: center;
	}
	
	.author-avatar-small {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	
	.author-name-small {
		font-size: 24rpx;
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.like-count-small {
		font-size: 24rpx;
		color: #999;
	}
	
	.empty-tips {
		text-align: center;
		color: #999;
		padding: 60rpx 0;
		font-size: 28rpx;
	}
</style> 